<template>
    <div class="wrapper">
        <ul class="list" v-for="(item,index) in categoryList">
            <li class="list-start">
                <span></span>
                {{item.title}}    
            </li>
            <li class="list-end" v-if="item.children" v-for="(val,index) in item.children">
                {{val.title}}
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        name:'list',
        props:{
            categoryList:Object
        }
    }
</script>
<style lang="stylus" scoped>
    .wrapper{
        .list{
            li{
                padding 0 .1rem
                height .44rem
                background #fff
                color #333
                text-align left
                font-size .16rem
                line-height .44rem
                text-indent .2rem
                border-bottom 1px solid #666
                span{
                    display inline-block
                    width .18rem
                    height .18rem
                    background url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.225rem
                    background-size .2rem 1.5rem   
                    vertical-align middle
                }
            }
            .list-end{
                text-indent .4rem
            }
           
            }
        }
    
</style>